@page
@namespace MultiAgentsServer.Pages
@using OpenAI.ObjectModels
@model UserPermissionManagementModel
@{
    ViewData["Title"] = "Authority Manage";
}

<div style="display: flex; height: 100vh;">
    <nav style="width: 200px; background: #f8f9fa; padding: 10px; height: 100vh; position: fixed; left: 0; top: 56px; z-index: 1000;">
        <ul style="padding: 0; list-style: none;">
            <li><a asp-page="UserPermissionManagement" style="cursor: pointer;">User Authority</a></li>
            <li><a asp-page="InviteManager" style="cursor: pointer;">Invite Code</a></li>
            <li><a asp-page="DefaultModelsManagement" style="cursor: pointer;">Model Configuration</a></li>
        </ul>
    </nav>
    <main style="margin-left: 200px; padding: 10px; width: calc(100% - 200px);">
        <div id="user-permission-management" class="management-panel" style="width: 100%; height: 100%;">
            <div style="display: flex; height: 100%;">
                <div style="width: 30%; overflow-y: auto; border-right: 1px solid #ddd; padding-right: 10px;">
                    <ul style="list-style: none; padding: 0;">
                        @foreach (var user in Model.UserList)
                        {
                            <li style="padding: 5px; border: 1px solid #ddd; margin-bottom: 5px; cursor: pointer;" onclick="showUserDetails('@user.Id', '@user.Name', '@string.Join(",", user.AccessChatModels)', '@string.Join(",", user.AccessWorkflowModels)')">
                                @user.Name
                            </li>
                        }

                    </ul>
                </div>
                <div id="user-details" style="width: 70%; padding-left: 20px;">
                    <div>
                        <h2>user info</h2>
                        <p>ID: <span id="user-id"></span></p>
                        <p>Name: <span id="user-name"></span></p>
                        <p>Access Model:</p>
                        <form method="post">
                            <input type="hidden" name="request.UserId" id="user-id-input">
                            <div style="display: flex;">
                                <div style="flex: 1; margin-right: 20px;">
                                    <h3>Chat Models</h3>
                                    @foreach (var modelName in Model.GptModelList)
                                    {
                                        var checkboxId = "chat" + modelName;
                                        <label><input type="checkbox" name="request.AccessChatModels" value="@modelName" id="@checkboxId">@modelName</label>
                                        <br>
                                    }
                                </div>
                                <div style="flex: 1;">
                                    <h3>Workflow Models</h3>
                                    @foreach (var modelName in Model.GptModelList)
                                    {
                                        var checkboxId = "workflow" + modelName;
                                        <label><input type="checkbox" name="request.AccessWorkflowModels" value="@modelName" id="@checkboxId">@modelName</label>
                                        <br>
                                    }
                                </div>
                            </div>
                            <button type="submit" formaction="?handler=SaveUserPermissions">save</button>
                        </form>
                        <form method="post" id="permission-form">
                            <input type="hidden" name="UserId" id="user-id-input-delete" value="">
                            <button type="button" onclick="confirmDelete()" style="margin-left: 20px;">delete</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </main>
</div>

<script>
    function confirmDelete() {
        var userId = document.getElementById('user-id-input-delete').value;
        if (userId && confirm('Are you sure you want to delete permissions for this user?')) {
            var form = document.getElementById('permission-form');
            form.action = '?handler=DeleteUserPermissions';
            form.submit();
        }
    }

    function showUserDetails(userId, username, chatModelStr, workflowModelStr) {
        document.getElementById('user-id').innerText = userId;
        document.getElementById('user-name').innerText = username;
        document.getElementById('user-id-input').value = userId;
        document.getElementById('user-id-input-delete').value = userId;

        // Convert comma-separated string back to array
        var chatModels = chatModelStr ? chatModelStr.split(',') : [];
        var workflowModels = workflowModelStr ? workflowModelStr.split(',') : [];
    
        // Clear previous selections
        @foreach (var modelName in Model.GptModelList)
        {
            <text>
            var chatCheckbox = document.getElementById('chat' + '@modelName');
            if (chatCheckbox) chatCheckbox.checked = false;
        
            var workflowCheckbox = document.getElementById('workflow' + '@modelName');
            if (workflowCheckbox) workflowCheckbox.checked = false;
            </text>
        }
    
        // Set checked state based on values
        chatModels.forEach(function (modelName) {
            var chatCheckbox = document.getElementById('chat' + modelName);
            if (chatCheckbox) chatCheckbox.checked = true;
        });

        workflowModels.forEach(function (modelName) {
            var workflowCheckbox = document.getElementById('workflow' + modelName);
            if (workflowCheckbox) workflowCheckbox.checked = true;
        });
    }

</script>